<template>
  <div class="wait-experiment-container">
    <pro-table
      ref="tableRef"
      row-key="mock"
      :data="tableData"
      :columns="columns"
      :total="total"
      :tool-button="false"
      @search="commEvent.onSearch"
      :page-change="commEvent.onPageChange"
    >
      <!-- 顶部操作 -->
      <template #tableHeader>
        <el-button type="primary" @click="saveVisible = true">新增</el-button>
        <!-- <el-button type="primary" @click="configVisible = true">原液参数</el-button> -->
        <el-button type="primary" @click="importVisible = true">导入</el-button>
        <el-button type="primary">导出</el-button>
        <el-button type="danger" plain :disabled="Boolean(!tableIds.length)" @click="commEvent.batchDelete">批量删除</el-button>
      </template>
      <!-- 操作 -->
      <template #operation>
        <el-button type="primary" link @click="saveVisible = true">编辑</el-button>
        <el-button type="primary" link @click="$router.push('/experiment/detail')">配置</el-button>
        <el-button link>复制</el-button>
        <el-button type="danger" link>删除</el-button>
      </template>
    </pro-table>
    <!-- 新增/编辑 -->
    <save-experiment v-model="saveVisible" />
    <!-- 原液参数 -->
    <config-experiment v-model="configVisible" />
    <!-- 导入逻辑选择 -->
    <import-dialog v-model="importVisible" @confirm="commEvent.handleImport" />
  </div>
</template>

<script setup lang="ts">
import { ref, h, onMounted, computed } from "vue"
import ProTable from "@/components/ProTable/index.vue"
import SaveExperiment from "./SaveExperiment.vue"
import ConfigExperiment from "./ConfigExperiment.vue"
import ImportDialog from "./ImportDialog.vue"
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"
import { ElMessage, ElMessageBox } from "element-plus"
import { mockDelete } from "@/api/modules/comm"
import { CHANNEL_OPTIONS } from "@/config"
// 参数
const tableRef = ref<ProTableInstance>() // 表格实例
const tableData = ref<any[]>([]) // 表格数据
const total = ref<number>(0) // 数据总数
const saveVisible = ref<boolean>(false) // 新增/编辑弹窗
const configVisible = ref<boolean>(false) // 原液参数弹窗
const importVisible = ref<boolean>(false) // 导入逻辑选择弹窗
// 页码参数
const pageParams = ref({
  pageIndex: 1,
  pageSize: 10
})
// 表单配置
const columns: ColumnProps<any>[] = [
  { type: "selection" },
  {
    prop: "sort",
    label: "序号",
    width: 80,
    render: scope => h("span", scope.$index + 1 + (pageParams.value.pageIndex - 1) * pageParams.value.pageSize)
  },
  { prop: "mock", label: "实验名称", width: 180, search: { el: "input" } },
  { prop: "mock", label: "实验类型", width: 180, search: { el: "select" } },
  { prop: "mock", label: "创建人", search: { el: "select" } },
  { prop: "mock", label: "实验开始时间", width: 220 },
  { prop: "mock", label: "实验结束时间", width: 220 },
  { prop: "mock", label: "创建时间", width: 180, search: { el: "date-picker", props: { style: { width: "100%" } } } },
  { prop: "mock", label: "实验状态", width: 180, search: { el: "select" } },
  {
    prop: "mock",
    label: "通道号",
    search: { el: "select" },
    enum: CHANNEL_OPTIONS
  },
  { prop: "operation", label: "操作", width: 260, fixed: "right" }
]
const tableIds = computed(() => tableRef.value?.selectedListIds || []) // 表格选择id
// 方法
const commEvent = {
  // 获取表格数据
  getTableData: async (params: any) => {
    // const { data } = await asyncFun(params)
    tableData.value = [{ mock: "001" }]
    total.value = 1
  },
  // 查询
  onSearch: () => {
    tableRef.value?.search()
    pageParams.value.pageIndex = 1
    const _search = tableRef.value?.searchParam
    commEvent.getTableData({ ...pageParams.value, ..._search })
  },
  // 分页
  onPageChange: (page: number, size: number) => {
    pageParams.value.pageIndex = page
    pageParams.value.pageSize = size
    const _search = tableRef.value?.searchParam
    commEvent.getTableData({ ...pageParams.value, ..._search })
  },
  // 批量删除
  batchDelete: () => {
    if (!tableIds.value.length) return
    ElMessageBox.confirm("是否确认删除选中数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(async () => {
        const { code } = await mockDelete()
        if (code !== "200") return
        ElMessage.success("删除成功")
        tableRef.value?.clearSelection()
      })
      .catch(() => {})
  },
  // 处理导入
  handleImport: (option: number) => {
    console.log("选择的导入逻辑:", option)
    ElMessage.success(`已选择导入逻辑${option}，开始导入...`)
    // 这里可以添加文件选择和上传逻辑
    // 例如: 打开文件选择器或调用导入接口
  }
}
onMounted(() => {
  commEvent.getTableData(pageParams.value)
})
</script>

<style lang="scss" scoped>
.wait-experiment-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 165px);
  :deep(.pro-table) {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    .card {
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: hidden;
      .el-card__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        .el-form-item--default {
          margin-bottom: 0;
        }
      }
    }
    .table-box {
      flex: 1;
      overflow: auto;
    }
  }
}
</style>
